<script setup>
import { defineAsyncComponent, onMounted, ref } from 'vue'
import { VApp, VMain } from 'vuetify/components'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useNavStore } from '@/store/nav'
import Installer from '@/components/Installer.vue'
import ChatPanel from '@/components/chat/ChatPanel.vue'
import ErrorNetwork from '@/components/common/ErrorNetwork.vue'
import JsonldRoot from '@/components/common/JsonldRoot.vue'
import LoadingMask from '@/components/common/LoadingMask.vue'
import AuthDialog from '@/components/dialogs/AuthDialog.vue'
import EarnDialog from '@/components/dialogs/EarnDialog.vue'
import InstallTutor from '@/components/dialogs/InstallTutorial.vue'
import AdDialog from '@/components/dialogs/ad/AdDialog.vue'
import Navigator from '@/components/layout/Navigator.vue'
import FullPhoto from '@/components/multimedia/FullPhoto.vue'
import WaterfulPhoto from '@/components/multimedia/WaterfulPhoto.vue'
import { isClose, isConnecting, isOpen } from '@/ws'

const DesktopViewer = defineAsyncComponent(() => import('@/components/viewer/desktop/DesktopViewer.vue'))

const appStore = useAppStore()
const { mountApp } = appStore
const { isDesktop, isMobile, isOnline, viewerExpand } = storeToRefs(appStore)

const navStore = useNavStore()
const { transitionName } = storeToRefs(navStore)

const isDev = ref(import.meta.env.DEV)

onMounted(mountApp)
</script>

<template>
  <v-app v-show="isOnline">
    <DesktopViewer
      v-if="isDesktop"
      class="viewer"
      :class="{ close: !viewerExpand, desktop: isDesktop, mobile: isMobile }"
    ></DesktopViewer>
    <v-main :class="{ desktop: isDesktop, mobile: isMobile }">
      <router-view v-slot="{ Component }">
        <transition :name="transitionName" mode="out-in">
          <keep-alive>
            <component :is="Component"></component>
          </keep-alive>
        </transition>
      </router-view>
      <EarnDialog></EarnDialog>
      <Navigator></Navigator>
      <ChatPanel></ChatPanel>
      <AuthDialog></AuthDialog>
      <LoadingMask></LoadingMask>
      <FullPhoto></FullPhoto>
      <WaterfulPhoto></WaterfulPhoto>
      <Installer></Installer>
      <InstallTutor />
      <div v-if="isDev" class="ws-status" :class="{ open: isOpen, connecting: isConnecting, close: isClose }"></div>
    </v-main>
    <AdDialog></AdDialog>
  </v-app>
  <ErrorNetwork v-if="!isOnline"></ErrorNetwork>
  <JsonldRoot></JsonldRoot>
</template>

<style lang="scss" scoped>
::v-deep(.v-application__wrap) {
  min-height: 100%;
  flex-direction: row;
  justify-content: center;
}

.viewer {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;

  &.close + ::v-deep(.v-main) {
    width: 0;
  }
}

::v-deep(.v-main) {
  width: 100%;
  overflow: hidden;
  position: relative;

  &.desktop {
    width: var(--desktop-main-width);
  }
}

.ws-status {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9999;

  &.open {
    background-color: chartreuse;
  }
  &.connecting {
    background-color: darkorange;
  }
  &.close {
    background-color: red;
  }
}

.none-enter-from,
.none-leave-to {
  transform: none;
}

.none-enter-active,
.none-leave-active {
  transition: none;
}

.slide-left-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
}

.slide-left-leave-to,
.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.1s ease-out;
}

.zoom-in-enter-from,
.zoom-out-leave-to {
  opacity: 0;
  transform: scale(0.1);
}

.zoom-in-leave-to,
.zoom-out-enter-from {
  opacity: 0;
}

.zoom-in-enter-active,
.zoom-out-leave-active {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform-origin: center calc(100% + 8.625rem);
}
.zoom-in-leave-active,
.zoom-out-enter-active {
  transition: opacity 0.1s ease-out;
}
</style>
